<template>

	<view class="content">
		<u-notice-bar speed=40 color=#FF6347 :text="notice[0].notice"></u-notice-bar>
		<view>
			<view class="head_box">
				<view class="box_item" :class="{box_item1: sort[0]==hanyan}">
					<view class="font_class">
						含烟阁
					</view>
					<view class="font_class">
						{{hanyan}}
					</view>

				</view>
				<view class="box_item" :class="{box_item1: sort[0]==qingtian}">
					<view class="font_class">
						晴天阁
					</view>
					<view class="font_class">
						{{qingtian}}
					</view>
				</view>

			</view>
			<view class="head_box">
				<view class="box_item" :class="{box_item1: sort[0]==bishui}">
					<view class="font_class">
						碧水间
					</view>
					<view class="font_class">
						{{bishui}}
					</view>
				</view>

				<view class="box_item" :class="{box_item1: sort[0]==tingyu}">
					<view class="font_class">
						听雨楼
					</view>
					<view class="font_class">
						{{tingyu}}
					</view>
				</view>
			</view>
			<view class="head_box">
				<view class="box_item" :class="{box_item1: sort[0]==yueliang}">
					<view class="font_class">
						月亮湾
					</view>
					<view class="font_class">
						{{yueliang}}
					</view>
				</view>
				<view class="box_item2">
					<view class="font_class">
						玩家总数
					</view>
					<view class="font_class">
						{{count}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import url from "../../js/url.js"
	export default {
		data() {
			return {
				token: null,
				notice: null,
				sort: [],
				count: null,
				lingxiao: null,
				yunmeng: null,
				bishui: null,
				qingtian: null,

				yueliang: null,
				liuying: null,
				tingyu: null,
				hanyan: null,

			}
		},
		onLoad() {
			//连接
			this.getNotice()
			uni.showLoading({
				title: '加载中'
			});
			var that = this;
			const value = uni.getStorageSync('token');
			this.token = value
			if (this.token != null) {
				uni.connectSocket({
					url: 'ws://8.134.102.196:10100/websocket',

				});
				//连接已打开
				// uni.onSocketOpen(function(res) {
				// 	that.show = false;
				// });
				//收到服务器
				var that = this;
				uni.onSocketMessage(function(res) {
					uni.hideLoading()
					let result = null;
					if (res.data instanceof ArrayBuffer) {
						let decoder = new TextDecoder("utf-8")
						let str = decoder.decode(res.data)
						result = JSON.parse(str);
						if (result.cmdMerge == 65541) {
							var sort = []
							var byteArray = new Uint8Array(result.data)
							let str1 = decoder.decode(byteArray)
							var result1 = JSON.parse(str1);
							var map = new Map();
							var count = 0
							for (let item in result1) {
								map.set(result1[item].roomName, result1[item].playerNumber)
								count = count + result1[item].playerNumber
								sort.push(result1[item].playerNumber)
							}
							that.count = count
							this.map = map
							that.lingxiao = this.map.get("凌霄斋")
							that.yunmeng = this.map.get("云梦阁")
							that.bishui = this.map.get("碧水间")
							that.qingtian = this.map.get("晴天阁")
							that.yueliang = this.map.get("月亮湾")
							that.liuying = this.map.get("流萤轩")
							that.tingyu = this.map.get("听雨楼")
							that.hanyan = this.map.get("含烟阁")

							sort.sort(function(a, b) {
								return b - a
							});
							// console.log("sort",sort)
							that.sort = sort
						}
					}
				});
			} else {
				uni.showToast({
					title: '请先登录！',
					duration: 2000,
					icon: "error"
				});
			}


		},
		methods: {
			getNotice() {
				//获取通知
				uni.request({
					url: 'http://' + url + '/record/notice',
					header: {
						//自定义请求头信息
						'authentication': this.token
					},
					success: (res) => {
						this.notice = res.data.data
					}
				});
			}
		}
	}
</script>

<style>
	.font_class{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.item_h1 {
		width: 100%;
		height: 500rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		border-radius: 10rpx;
		width: 120px;
		height: 120px;
		background-color: #fff;
	}


	.box_item2 {
		border-radius: 30rpx;
		height: 300rpx;
		width: 300rpx;
		background-color: skyblue;
		margin: 30rpx;
		border: 1rpx solid black;
		font-size: 34rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.box_item {
		border-radius: 30rpx;
		height: 300rpx;
		width: 300rpx;
		background-color: #71d5a1;
		margin: 30rpx;
		border: 1rpx solid black;
		font-size: 34rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.box_item1 {
		background-color: #fab6b6;
		/* margin: 10rpx; */
		font-size: 34rpx;
		color: black;
	}

	.head_box {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}
</style>